<template>
    <div class="banner">
        <img class="banner-img" src="//img1.qunarzz.com/sight/p0/201305/24/30ea5d168daccc88c8d65eac.jpg_600x330_7c05cb77.jpg" alt="" srcset="">
    
        <div class="banner-info">
            <div class="banner-title">
                伏羲山飞龙峡
            </div>
            <div class="banner-number">
                <span class="iconfont">&#xe632;</span>
                6
            </div>
        </div>
    </div>
</template>
 
<script>
export default {
    name:'DetailBanner',
    data(){
        return{

        };
    },

}
</script>

<style lang="stylus" scoped>
.banner
    position :relative
    overflow :hidden
    height :0
    padding-bottom :55%
    .banner-img
        width :100%
    .banner-info
        display ：flex
        position :absolute
        left :0
        right :0
        bottom :0
        line-height :.6rem
        color :#fff
        .banner-title
            flex :1
        .banner-number
            padding: 0 .4rem
            line-height :.14rem
            height :.4rem
            border-radius :.2rem
            background :rgba(0,0,0,.8)

</style>
